<template>
  <view v-if="items != null">
    <view class="gui-order gui-bg-white gui-dark-bg-level-3" v-for="(order, oIndex) in items" :key="oIndex">
      <view class="gui-flex gui-row gui-space-between gui-align-items-center">
        <text class="gui-order-number gui-primary-text">订单号 : {{order.id}}</text>

      </view>
      <!-- 循环展示订单 -->
      <view>
        <text class="gui-shop gui-primary-text gui-block">{{order.categoryName}}</text>
        <!-- 循环订单商品 -->
        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">{{order.zhuoNum}}桌</text>

          <text class="gui-order-goods-price">{{order.shopType}}</text>
        </view>

        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">{{order.caiNum}}个菜</text>

          <text class="gui-order-goods-price">12人/桌</text>
        </view>
        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">联系人：{{order.contact}}</text>
          <text class="gui-order-goods-price">{{order.phone}}</text>
        </view>
        <view class="gui-order-goods gui-flex">
          <text class="gui-order-goods-name gui-secondary-text">{{order.city}}{{order.address}}</text>
        </view>
        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">计划时间</text>
          <text class="gui-order-goods-price">{{order.orderTime}}</text>
        </view>
      </view>

      <view class="gui-order-footer gui-flex gui-row gui-space-between">
        <text></text>
        <!-- <text class="gui-order-number gui-color-blue" v-if="order.contentType">未联系</text> -->
        <!-- <text class="gui-order-number gui-color-green" v-else>已联系</text> -->
        <text class="gui-order-btn gui-border gui-color-white gui-bg-green" @click="cell(order)">拨打电话</text>
        <!-- <text class="gui-order-btn gui-border gui-color-white gui-bg-red">已预约</text> -->

      </view>
    </view>


  </view>
  <view class="self-no-data">
    <text>暂无数据</text>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        tabs: [{
            id: 0,
            name: '全部订单'
          }, {
            id: 1,
            name: '待服务'
          },
          {
            id: 2,
            name: '服务完成'
          }
        ],
        // 选中选项的 索引
        currentIndex: 0,
        // items: [{
        // 	orderNumber: '001'
        // }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ],
        items: [],
        shopId: '',


      }
    },
    onLoad(e) {
      if (e) {
        this.shopId = e.id;
        this.initData();
      }
    },
    methods: {
      initData() {
        var self = this
        uni.gRequest.get('order/list/shop', {
          shopId: this.shopId
        }).then(result => {
          // result.data.image = uni.gRequest.file + result.data.image;
          self.items = result.data;
          // console.log('11111', self.shopInfo)

        });
      },
      cell(order) {
        uni.makePhoneCall({
          phoneNumber: order.phone
        })
      }

    }
  }
</script>

<style scoped>
  .self-no-data {
    height: 700rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header {
    padding: 15rpx 30rpx;
    height: 100rpx;
  }

  .gui-order {
    padding: 25rpx;
    margin: 25rpx;
    margin-bottom: 0rpx;
    border-radius: 10rpx;
  }

  .gui-order-number {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 300rpx;
    flex: 1;
  }

  .gui-shop {
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .gui-order-goods {
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20rpx;
    align-items: flex-start;
  }

  .gui-order-goods-img {
    width: 100rpx;
    height: 100rpx;
  }

  .gui-order-goods-name {
    line-height: 40rpx;
    width: 200rpx;
    flex: 1;
    overflow: hidden;
    font-size: 26rpx;

  }

  .gui-order-goods-price {
    font-size: 24rpx;
    line-height: 50rpx;
    width: 150rpx;
    text-align: right;
  }

  .gui-order-footer {
    margin-top: 2px;
  }

  .gui-order-status {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 100rpx;
    text-align: center;
  }

  .gui-order-btn {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 22rpx;
    text-align: center;
    border-radius: 60rpx;
    margin-left: 20rpx;
  }

  .gui-order-btn-red {
    border-color: #FF0036;
    color: #FF0036;
  }

  .gui-empty-icon {
    font-size: 130rpx;
    line-height: 130rpx;
    margin-top: 200rpx;
  }
</style>
